<template>
  <div class="login">
    <NavBar :title="navTitle" />
    <img class="logo" src="@/assets/imgs/logo.png" alt="" />
    <van-form @submit="onSubmit" v-if="isLogin">
      <van-field
        v-model="username"
        name="loginName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="go_sign" @click="handIsLoginSign(false)">
        没有账号?立即注册
      </div>
      <div style="margin: 16px">
        <van-button
          color="#1baeae"
          round
          block
          type="primary"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
    <van-form @submit="onSignSubmit" v-else>
      <van-field
        v-model="loginName"
        name="loginName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="signPassword"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="go_sign" @click="handIsLoginSign(true)">有号?点击登录</div>
      <div style="margin: 16px">
        <van-button
          color="#1baeae"
          round
          block
          type="primary"
          native-type="submit"
        >
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import NavBar from "@/components/NavBar.vue";
import { registers, login } from "@/utils/apis/userApi";
import md5 from "js-md5";
import storage from "@/utils/storage";
interface LoginForm {
  loginName: string;
  password: string;
  passwordMd5: string;
}
export default defineComponent({
  components: { NavBar },
  setup() {
    const router = useRouter();
    const state = reactive({
      username: "",
      password: "",
      loginName: "",
      signPassword: "",
      isLogin: true,
      navTitle: "登录",
    });
    async function onSignSubmit(values: LoginForm) {
      const form = {
        loginName: values.loginName,
        passwordMd5: values.password,
      };
      await registers(form);
      state.isLogin = true;
    }
    async function onSubmit(values: LoginForm) {
      const form = {
        loginName: values.loginName,
        passwordMd5: md5(values.password),
      };

      const res = await login(form);
      storage.set("token", res.data);
      router.push({
        path: "/",
      });
      // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
      window.location.href = "/";
    }
    function handIsLoginSign(isLoginSign: boolean) {
      state.navTitle = isLoginSign ? "登录" : "注册";
      state.isLogin = isLoginSign;
    }
    return { ...toRefs(state), onSubmit, handIsLoginSign, onSignSubmit };
  },
});
</script>
<style lang="scss" scoped>
.login {
  text-align: center;
  .logo {
    width: 200px;
    height: 200px;
    text-align: center;
  }
  .go_sign {
    text-align: left;
    color: $themeColor;
    margin: 20px;
  }
}
</style>
